
import { useState } from 'react';
import { getData2, selectOptions } from '../Data'
import { useMount, useReactive } from 'ahooks'

import { Switch, Select, InputNumber } from "antd"

import { GroupRow } from '@grapecity/wijmo.grid'
import { FlexGrid, FlexGridColumn, FlexGridCellTemplate } from '@grapecity/wijmo.react.grid';
import { Globalize, CollectionView, SortDescription, PropertyGroupDescription } from '@grapecity/wijmo';

const optionsA = [
    { value: 'Cell', label: '自订样式' },
    { value: 'ColumnHeader', label: '自订页头' },
    { value: 'GroupHeader', label: '自订组头' },
    { value: 'CellEdit', label: '自订修改' },
    { value: 'ColumnFooter', label: '自订页脚' },
    { value: 'Group', label: '自订分组' },
]
const optionsB = [
    { value: 'TopLeft', label: '自订头部' },
    { value: 'RowHeader', label: '自订第一列' },
    { value: 'BottomLeft', label: '自订底部' },
    { value: 'RowHeaderEdit', label: '自订编辑样式' },
]

const WijmoD01 = () => {

    const InitData = useReactive({
        TopLeft: true,
        BottomLeft: true,
        RowHeader: true,
        RowHeaderEdit: true,
        Cell: true,
        CellEdit: true,
        GroupHeader: true,
        ColumnHeader: true,
        Group: true,
        ColumnFooter: true,
        highlightDownloads: true,
        rowHeaderTemplate: e => e.row.index + 1,
        totalTemplate: e => (<> 合计: {Globalize.formatNumber(e.value, 'N0')}  </>)
    })

    const [Data, setData] = useState()

    useMount(() => {
        // const dataCv = getData2(100)
        // 序列化
        var dataCv = new CollectionView(getData2(100));
        // 排序
        dataCv.sortDescriptions.push(new SortDescription('date', true))
        // 分组
        dataCv.groupDescriptions.push(new PropertyGroupDescription('country'))
        setData(dataCv)
    })

    const init = (e) => e.columnFooters.rows.push(new GroupRow())



    if (Data) {
        return (
            <div className='Page'>
                <FlexGrid
                    itemsSource={Data}
                    allowSorting={false}
                    autoSizeMode="Both"
                    allowResizing="Both"
                    deferResizing={true}
                    initialized={init}
                >
                    {/* 左上角 */}
                    <FlexGridCellTemplate cellType="TopLeft" template={InitData.TopLeft ? () => '№' : null} />
                    {/* 左下角 */}
                    {InitData.BottomLeft ? <FlexGridCellTemplate cellType="BottomLeft" template={() => <span>丨</span>} /> : null}
                    {/* 索引栏 */}
                    <FlexGridCellTemplate cellType="RowHeader" template={InitData.RowHeader ? InitData.rowHeaderTemplate : null} />
                    {/* 编辑状态的索引栏 */}
                    <FlexGridCellTemplate cellType="RowHeaderEdit" template={InitData.RowHeaderEdit ? () => '...' : null} />

                    <FlexGridColumn header="Country" binding="country" width="*">
                        {/* 自定义列 */}
                        <FlexGridCellTemplate cellType="Cell" template={InitData.Cell ? e =>
                            (<>  {e.item.country} </>) : null} />
                        {/* 自定义修改选项 */}
                        <FlexGridCellTemplate cellType="CellEdit" template={InitData.CellEdit ? (e) =>
                            (<Select options={selectOptions} value={e.value} onChange={v => e.value = v} />) : null} />

                        <FlexGridCellTemplate cellType="GroupHeader" template={InitData.GroupHeader
                            ? (context) => {
                                return (
                                    <>
                                        <input type="checkbox" checked={context.row.isCollapsed} onChange={e => context.row.isCollapsed = e.target.checked} />
                                        {context.item.name} ({context.item.items.length} items)
                                    </>
                                )
                            }
                            : null} />
                    </FlexGridColumn>

                    <FlexGridColumn header="Downloads" binding="downloads" width='*' aggregate="Sum">
                        {/* 自定义行头 */}
                        <FlexGridCellTemplate cellType="ColumnHeader" template={InitData.ColumnHeader ? () =>
                        (<>
                            <input type="checkbox" checked={InitData.highlightDownloads} onChange={(e) => InitData.highlightDownloads = e.target.checked} />
                            Downloads
                        </>) : null} />
                        {/* 自定义单元格 */}
                        <FlexGridCellTemplate cellType="Cell" template={InitData.Cell
                            ? (context) => {
                                let style = { fontWeight: 700, color: '' }, downloads = context.item.downloads;
                                if (InitData.highlightDownloads) { style.color = downloads > 10000 ? 'green' : 'red'; }
                                return <span style={style}>{downloads}</span>
                            } : null} />
                        {/* 自定义修改样式 */}
                        <FlexGridCellTemplate cellType="CellEdit" template={InitData.CellEdit ? (e) => <InputNumber value={e.value} onChange={v => e.value = v} /> : null} />


                        <FlexGridCellTemplate cellType="Group" template={InitData.Group ? InitData.totalTemplate : null} />
                        <FlexGridCellTemplate cellType="ColumnFooter" template={InitData.ColumnFooter ? InitData.totalTemplate : null} />
                    </FlexGridColumn>
                </FlexGrid>

                <div>列选项</div>
                <div className='Switch'>
                    {optionsA.map(({ label, value }) =>
                        <div key={value}>
                            <div>{label}</div>
                            <Switch defaultChecked={InitData[value]} onChange={e => InitData[value] = e} />
                        </div>
                    )}
                </div>
                <div>网格选项</div>
                <div className='Switch'>
                    {optionsB.map(({ label, value }) =>
                        <div key={value}>
                            <div>{label}</div>
                            <Switch defaultChecked={InitData[value]} onChange={e => InitData[value] = e} />
                        </div>
                    )}
                </div>
            </div >
        )
    }
}

export default WijmoD01;